<template>
  <div class="hello">
    <!-- <router-link to="/v-if">v-if</router-link> -->
    <ul class="box">
      <li v-for="(item,index) of list" :key="index" @click="jump(item)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import router from '@/router'
export default {
  name: 'HelloWorld',
  data () {
    return {
      list:[
        {name: 'VIf', txt: 'v-if'},
        {name: 'ForArr', txt: 'for-arr'},
        {name: 'Arr', txt: 'arr'},
      ]
    }
  },
  mounted(){
    console.log(router)
    this.list = router.options.routes
  },
  methods:{
    jump(item){
      this.$router.push({name:item.name})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.box{
  margin:30px auto;
  width:300px;
  min-height:300px;
  list-style:none;
  li{
    margin:0 auto;
    width:92%;
    height:30px;
    line-height:30px;
    cursor:pointer;
    &:hover{
      background:rgb(81, 8, 218);
      color:#fff;
    }
  }
}
</style>
